<template>
  <div class="table-wrap">
    <el-table
      class="table"
      :data="tableConfig.tableData"
      style="width: 100%"
      @selection-change="selectionChange"
    >
      <el-table-column v-if="tableConfig.showIndexColumn" type="index" width="80" label="序号" align="center"/>
      <el-table-column v-if="tableConfig.showSelectionColumn" type="selection" width="55"  align="center" />
      <template v-for="column in tableConfig.columnConfig" :key="column.prop">
        <el-table-column v-bind="column" #default="scope" align="center">
          <slot :name="column.field" :row="scope.row">{{ scope.row[column.field] }}</slot>
        </el-table-column>
      </template>
         <!-- 操作栏 -->
      <el-table-column label="操作" min-width="200" align="center">
        <template #default>
          <el-button type="primary" :icon="Edit" size="small"></el-button>
          <el-button type="danger" :icon="Delete" size="small"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="table-bottom">
      <div class="pagination-wrap">
        <el-pagination
          v-if="tableConfig.paginationInfo"
          :currentPage="tableConfig.paginationInfo?.currentPage"
          :page-size="tableConfig.paginationInfo.pageSize"
          :page-sizes="[5, 10, 20, 30]"
          layout="total, prev, pager, next, sizes"
          :total="tableConfig.paginationInfo.total"
          :size="tableConfig.paginationInfo.size ?? false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
import { ITable } from './type'
import { Delete, Edit } from '@element-plus/icons-vue'

defineProps({
  tableConfig: {
    type: Object as PropType<ITable>,
    required: true
  }
})

const selectionChange = () => {}
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<style lang="less" scoped>
.table-wrap {
  height: 100%;
  margin: 10px;
  .table {
    margin-bottom: 38px;
  }
  .table-bottom {
    height: 36px;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: rgba(188, 211, 221, 0.9) !important;
    border-radius: 6px;
    .pagination-wrap {
      float: left;
    }
  }

  :deep(.el-table) {
    background-color: transparent; //背景色设为透明
    border-radius: 6px;//圆角边框
    th.el-table__cell.is-leaf {//设置表头底部边框为绿色
        border-bottom: 1px solid Rgb(128,255,255,60%);
      }
    th { //表头背景为蓝色渐变色，文字颜色为白色，不加粗
      padding-top: 9px;//设置行高（通过padding控制）
      padding-bottom:6px;
      background: linear-gradient(180deg,rgb(9, 149, 209), #2a6bb6 100%);
      color: #eee;
      font-weight: normal;
    }
    tr{//每一行背景色设为透明

      background-color: transparent;
      &:hover {//鼠标悬浮变色
        td {
          background-color:#1B4584 !important;
          color: #80ffff !important;
        }
      }
      td {//每一行的每一列文字为白色，底部边框为绿色，
        padding-top: 6px;//设置行高（通过padding控制）
        padding-bottom:6px;
        color: #333;
        border-bottom: 1px solid Rgb(128,255,255,60%);

      }
    }
    th.el-table__cell:first-child.cell {//第一个表头缩进30px
        padding-left: 30px;
    }
    .el-table__cell:first-child .cell {//第一列数据缩进30px
      padding-left: 30px;
    }
    .el-button--text{//按钮颜色为绿色
      color:#80ffff;
    }
  }
}

</style>
